<template>
  <a-row>
    <a-col :span="24">
      <a-form layout="inline">
        <a-form-item label="牵引车车牌号">
          <a-input v-model="searchForm.tractorNumber"/>
        </a-form-item>
        <a-form-item label="司机姓名">
          <a-input v-model="searchForm.driverName"/>
        </a-form-item>
        <a-form-item label="手机号码">
          <a-input v-model="searchForm.phone"/>
        </a-form-item>
        <a-form-item label="更换时间">
          <a-range-picker @change="onChange">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="handleSubmit1">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="exportExcel">导出excel</a-button>
        </a-form-item>
      </a-form>

      <a-table :columns="columns" :data-source="tableData" class="tableMargin" :pagination="pagination" rowKey="changeId">
        <span slot="udTitle">
          总整备质量(kg)
          <a-tooltip>
            <template slot="title">
              总整备质量=牵引车整备质量+挂车整备质量
            </template>
            <a-icon type="question-circle" />
          </a-tooltip>
        </span>
      </a-table>
    </a-col>
</a-row>
</template>

<script>
import {queryTruckChangeListByTrailer} from '@/api/landCenter'
import {commonExport} from '@/api/request'

export default {
  name: 'railer-change-record',
  props: ['truckId'],
  data () {
    return {
      searchForm: {
        truckId: null,
        tractorNumber: '',
        driverName: '', // 司机姓名
        phone: '', // 手机号码
        time1: '', // 更换日期1
        time2: '' // 更换日期2
      },
      columns: [{
        title: '更换时间',
        dataIndex: 'createTime',
        width: 120,
        customRender: (text, record, index) => {
          if (record.isNew === 1) {
            return <div>{text}<span class='redMsg'>当前</span></div>
          }
          return text
        }
      }, {
        title: '牵引车车牌号',
        dataIndex: 'tractorNumber',
        ellipsis: true
      }, {
        title: '司机姓名',
        dataIndex: 'driverName',
        ellipsis: true
      }, {
        title: '司机手机号码',
        dataIndex: 'phone'
      }, {
        dataIndex: 'kerbMass',
        key: 'kerbMass',
        ellipsis: true,
        slots: { title: 'udTitle' }
      }, {
        title: '司机状态',
        dataIndex: 'status',
        customRender: (text, row, index) => {
          if (text === 1) {
            return <a-badge status="success" text="正常"/>
          } else if (text === 0) {
            return <a-badge status="error" text="冻结"/>
          }
        },
        _needName: true
      }, {
        title: '操作人',
        dataIndex: 'operatorName',
        key: 'operatorName'
      }, {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
        ellipsis: true
      }],
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10
    }
  },
  created () {
    this.searchForm.truckId = this.truckId
  },
  methods: {
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      queryTruckChangeListByTrailer({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      })
    },
    exportExcel () {
      commonExport('/truck/exportTruckChangeListByTrailer', {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    onChange (date, dateStr) {
      this.searchForm.time1 = dateStr[0]
      this.searchForm.time2 = dateStr[1]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.handleSubmit()
    })
  }
}
</script>

<style lang="less" scoped>
  /deep/ td{
    position: relative;
    .redMsg {
      position: absolute;
      display: inline-block;
      background: red;
      top: 0;
      width: 60px;
      left: 0;
      font-size: 12px;
      height: 16px;
      text-align: center;
      color: white;
    }
  }
</style>
